import React, { Component } from 'react'
import { NavLink, Route } from 'react-router-dom'
import Details from './Details'


export default class Message extends Component {

    state = {
        messages: [
            { id: '01', title: 'message001' },
            { id: '02', title: 'message002' },
            { id: '03', title: 'message003' }
        ]
    }
    /* 使用编程式路由，为click事件绑定push跳转
       其实背后的原理很简单，就是利用了props中history对象对应的api
       然后使用不同方式传递props参数的话，其实跟原生的api差不多
    */
    pushShow = (id,title)=>{
    // 方式1，采用 params 参数传递
    //    this.props.history.push(`/home/messages/details/${id}/${title}`)
    // 方式2, 采用 search 参数传递
    //    this.props.history.push(`/home/messages/details?id=${id}&title=${title}`)
    // 方式3，采用state 参数传递 (state中的id和title采用了简写方式，完整写法应该是id:id,title:title)
    this.props.history.push({pathname:'/home/messages/details',state:{id,title}})
    }

    replaceShow = (id,title) =>{
        // 方式1，采用 params 参数传递
        // this.props.history.replace(`/home/messages/details/${id}/${title}`)
        // 方式2: 采用 search 参数传递
        // this.props.history.replace(`/home/messages/details?id=${id}&title=${title}`)
        this.props.history.replace({pathname:'/home/messages/details',state:{id,title}})
    }

    // 前进+1
    forward = ()=>{
        this.props.history.goForward();
    }
    // 后退+1
    back = ()=>{
        this.props.history.goBack();
    }
    // 后退+2
    go = ()=>{
        this.props.history.go(-2);
    }
    
    render() {
        const { messages } = this.state;

        return (
            <div>
                <div>
                    <ul>
                        {
                            messages.map((messageObj) => {
                                return (
                                    <li key={messageObj.id}>
                                         {/* 传递state参数 */}
                                        <NavLink replace to={{ pathname: '/home/messages/details', state: { id: messageObj.id, title: messageObj.title } }}>{messageObj.title}</NavLink>
                                        {/* <NavLink replace to={`/home/messages/details/${messageObj.id}/${messageObj.title}`}>{messageObj.title}</NavLink> */}
                                        {/* <NavLink replace to={`/home/messages/details?id=${messageObj.id}&title=${messageObj.title}`}>{messageObj.title}</NavLink> */}
                                        &nbsp;<button onClick={()=>{this.pushShow(messageObj.id,messageObj.title)}}>push跳转</button>
                                        &nbsp;<button onClick={()=>{this.replaceShow(messageObj.id,messageObj.title)}}>replace跳转</button>
                                    </li>

                                )
                            })
                        }
                    </ul>
                </div>
                <hr />
                <Route path={'/home/messages/details'} component={Details} />
                {/* <Route path={'/home/messages/details/:id/:title'} component={Details} /> */}
                {/* 设置前进、后退按钮 */}
                <button onClick={this.forward}>前进</button>
                &nbsp;<button onClick={this.back}>后退</button>
                <button onClick={this.go}>后退+2</button>
            </div>
        )
    }
}
